<template>
	<view class="main">
		<!-- 顶部栏 -->
		<MyHead2 :title="title"></MyHead2>

		<!-- =================================“我已加入的”知识链盒子================================= -->
		<view class="MyKnowledgesBox">
			<text class="title">已加入的知识链</text>
			
			<!-- 【大话题分类】标签选项 -->
			<view class="TagBox">
				<scroll-view class="tagView" scroll-x="true">
					<view :class="{Tag: 'true', Tag_active: tag1 === index}" @click="chooseTag1(index)" v-for="(item,index) in myTag" :key="item.tagId">
						{{ item.tagName }}
					</view>
				</scroll-view>
			</view>
        
			<!-- 下面对应的【小话题】盒子区域 -->
			<view class="MySmallKnowledgesBox">
				<!-- 每个【小话题】 -->
				<view class="smallKnowledge" v-for="item in showMyKnowledges" :key="item.knowledge_circle_id" @click="goToKnowledgeCircle(item)">
					<!-- 头像图标 -->
					<image :src="item.avatar" class="avatar"></image>
					
					<!-- 文字介绍 -->
					<view class="text">
					   <view class="title"> {{ item.title }} </view>
					   <!-- <view class="description"> {{item.description}} </view> -->
					   <view class="description"> 已加入知识圈 </view>
					</view>
				</view>
			</view>
		</view>
		<!-- ================================================================================================== -->
	
		<!-- =================================其他“我未加入”的更多优质知识链盒子================================== -->
		<view class="MoreKnowledgesBox">
			<text class="title">更多优质知识链</text>
			
			<!-- 【大话题分类】标签选项 -->
			<view class="TagBox">
				<scroll-view class="tagView" scroll-x="true">
					<view :class="{Tag: 'true', Tag_active: tag2 === index}" @click="chooseTag2(index)" v-for="(item,index) in moreTag" :key="item.tagId">
						{{ item.tagName }}
					</view>
				</scroll-view>
			</view>
    
			<!-- 下面对应的【小话题】盒子区域 -->
			<view class="MoreSmallKnowledgesBox">
				<!-- 每个【小话题】 -->
				<view class="smallKnowledge" v-for="item in showMoreKnowledges" :key="item.knowledge_circle_id" @click="goToKnowledgeCircle(item)">
					<!-- 头像图标 -->
					<image :src="item.avatar" class="avatar"></image>
					
					<!-- 文字介绍 -->
					<view class="text">
						<view class="title"> {{ item.title }} </view>
						<!-- <view class="description"> {{item.description}} </view> -->
						<view class="description"> 未加入知识圈 </view>
					</view>	 
				</view>
			</view>
		</view>
		<!-- ================================================================================================== -->
		
		<!-- 自定义底部tabar -->
		<MyTabar :currentPath="pathUrl"></MyTabar>
  </view>
</template>

<script>
  import tagApi from '../../api/intro/intro.js'
  export default {
    data() {
		return {
			title: '知识链',
			pathUrl: '/pages/topic/topic',
			//反别代表点击选中“已加入知识链”和“更多优质知识链”的标签分类选项
			tag1: 0,
			tag2: 0,
			//对应着显示对应“标签分类选项”的【小话题】
			showMyKnowledges: [],
			showMoreKnowledges: [],
			//直接获取“已加入知识链”和“更多优质知识链”的所有【大话题】列表
			//是上面两个数组的数据来源
			myKnowledgeList: [],
			moreKnowledgeList: [],
			//“已加入知识链”的“标签分类选项”
			//默认第一个是显示“全部”的选项
			myTag: [
				{
					tagId: '0',
					tagName: '全部'
				}
			],
			//“更多优质知识链”的“标签分类选项”
			//默认第一个是显示“全部”的选项
			moreTag: [
				{
					tagId: '0',
					tagName: '全部'
				}
			]
		};
    },
	onLoad() {
		let list = tagApi.knowledgeCircleList
		//这个方法直接一次性获取并拆分出“已加入知识链”和“更多优质知识链”的所有话题列表
		this.getAllKnowledgeList(list)
	},
    methods:　{
		// 跳转指定知识圈帖子页面
		goToKnowledgeCircle(item){
			let knowledge_circle_id = item.knowledge_circle_id
			uni.navigateTo({
				url: `../../knowledgeCircle/index/index?knowledge_circle_id=${knowledge_circle_id}`
			})
		},
		
		// 这个方法直接一次性获取并拆分出“已加入知识链”和“更多优质知识链”的所有话题列表
		getAllKnowledgeList(list){
			let myKnowledgeList = []
			let moreKnowledgeList = []
			list.forEach(tag => {
				//注意这里，tag、tagTemp代表每一个【大话题】
				//knowledgeCircle代表每个大话题的【小话题数组】，knowledge代表里面每一个【小话题】
				if(tag.myKnowledgeSum > 0){
					//用两个【临时大话题】获取当前大话题分类，一个代表这个大话题里【我已加入的】，一个代表这个大话题【更多优质知识链】
					//然后把小话题分类数组清空
					let tagTemp_my = {
						tagId: tag.tagId,
						tagName: tag.tagName,
						myKnowledgeSum: tag.myKnowledgeSum,
						knowledgeCircle: [] //把小话题分类数组清空
					}
					let tagTemp_more = {
						tagId: tag.tagId,
						tagName: tag.tagName,
						myKnowledgeSum: tag.myKnowledgeSum,
						knowledgeCircle: [] //把小话题分类数组清空
					}
					
					//然后遍历小话题分类数组，如果是“我”已经选中加入的，就再加入【我已加入的】的【临时大话题】里
					//如果不是“我”选中的小话题，就加入【更多优质知识链】的【临时大话题】里
					tag.knowledgeCircle.forEach(knowledge => {					
						if(knowledge.myKnowledgeCircle){
							tagTemp_my.knowledgeCircle.push(knowledge)
						}else{
							tagTemp_more.knowledgeCircle.push(knowledge)
						}
					})
					
					//然后判断一下“临时的”【我已加入的知识链】和【更多优质知识链】它两到底有没有装入内容
					//有的话，就正式加入【我已加入的知识链】和【更多优质知识链】里，还有【标签分类选项】
					if(tagTemp_my.knowledgeCircle.length > 0){
						myKnowledgeList.push(tagTemp_my)
						//分离出大话题的“标签”，单独放到【标签数组】作为第一行可选的分类标签
						let obj = {
							tagId: tagTemp_my.tagId,
							tagName: tagTemp_my.tagName
						}
						this.myTag.push(obj)
					}
					if(tagTemp_more.knowledgeCircle.length > 0){
						moreKnowledgeList.push(tagTemp_more)
						// 同时别忘了这个大话题也放入到【更多优质话题】的选项标签里，因为这个大话题还是有“我”没有加入的
						let obj = {
							tagId: tagTemp_more.tagId,
							tagName: tagTemp_more.tagName
						}
						this.moreTag.push(obj)
					}	
				}else{
					//那么如果这个大话题分类连一个【我已经加入的】都没有，那就直接直接放入【更多优质话题】就行了
					moreKnowledgeList.push(tag)
					let obj = {
						tagId: tag.tagId,
						tagName: tag.tagName
					}
					this.moreTag.push(obj)
				}
			})
			this.myKnowledgeList = myKnowledgeList
			this.moreKnowledgeList = moreKnowledgeList
			
			//然后马上
			let showMyKnowledges = []
			if(this.tag1 === 0){
				this.myKnowledgeList.forEach(BigKnowledge => {
					showMyKnowledges = showMyKnowledges.concat(BigKnowledge.knowledgeCircle)
				})
				//让预览介绍不要太长
				showMyKnowledges = this.formateDescription(showMyKnowledges)
				
				this.showMyKnowledges = showMyKnowledges
			}
			if(this.tag2 === 0){
				let showMoreKnowledges = []
				if(this.tag2 === 0){
					this.moreKnowledgeList.forEach(BigKnowledge => {
						showMoreKnowledges = showMoreKnowledges.concat(BigKnowledge.knowledgeCircle)
					})
				}
				//让预览介绍不要太长
				showMoreKnowledges = this.formateDescription(showMoreKnowledges)
				
				this.showMoreKnowledges = showMoreKnowledges
			}
		},
		
		//点击“已加入的知识链”标签分类选项时触发
		chooseTag1(index){
			this.tag1 = index
			let showMyKnowledges = []
			if(this.tag1 === 0){
				this.myKnowledgeList.forEach(BigKnowledge => {
					showMyKnowledges = showMyKnowledges.concat(BigKnowledge.knowledgeCircle)
				})
			}else{
				showMyKnowledges = this.myKnowledgeList[index-1].knowledgeCircle
			}
			
			//让预览介绍不要太长
			showMyKnowledges = this.formateDescription(showMyKnowledges)
			
			this.showMyKnowledges = showMyKnowledges
		},
		//点击“更多优质知识链”标签分类选项时触发
		chooseTag2(index){
			this.tag2 = index
			let showMoreKnowledges = []
			if(this.tag2 === 0){
				this.moreKnowledgeList.forEach(BigKnowledge => {
					showMoreKnowledges = showMoreKnowledges.concat(BigKnowledge.knowledgeCircle)
				})
			}else{
				showMoreKnowledges = this.moreKnowledgeList[index-1].knowledgeCircle
			}
			
			//让预览介绍不要太长
			showMoreKnowledges = this.formateDescription(showMoreKnowledges)
			
			this.showMoreKnowledges = showMoreKnowledges
		},
		
		//让预览介绍不要太长
		formateDescription(showList){
			showList.forEach(knowledge => {
				if(knowledge.description.length > 14){
					knowledge.description = knowledge.description.slice(0,13) + '...'
				}
			})
			return showList
		}
    },
  }
</script>



<style>
	page{
		background-image: url('https://gd-hbimg.huaban.com/68bb9dee1eed7f34673120d61b18a29d88adcb83713c9-hDYMPo_fw480webp');
		background-size: 100% 100%;
	}
</style> 

<style lang="less" scoped>
	.main {
		//-----------------------------“我已加入的”知识链盒子
		.MyKnowledgesBox {
			width: 80%;
			height: 490rpx;
			margin: auto;
			margin-top: 27rpx;
			padding: 16px;
			background-color: #2352615c;
			border-radius: 20px;
			// 大标题
			.title {
				color: white;
				font-size: 15px;
			}
			
			// 第一行【大话题分类】选项区域
			.TagBox {
				width: 100%;
				overflow: hidden;
				padding: 13px 10px 13px 0px;
				.tagView {
					white-space: nowrap;/* 使所有内容在一行显示 */
					overflow-y: auto;
					.Tag {
						display: inline-block;
						width: auto;
						height: 54rpx;
						margin-right: 20px;
						padding: 7px;
						line-height: 26rpx;
						background-color: #a9d1f0;
						text-align: center;
						box-sizing: border-box;
						border-radius: 10px;
						font-size: 14px;
					}
					.Tag_active {
						background-color: #5f86c1;
					}
				}
			}

			// 【小话题】区域
			.MySmallKnowledgesBox {
				width: 100%;
				height: 283rpx;
				overflow-y: auto;
				.smallKnowledge {
					display: flex;
					overflow-y: auto;
					width: 98%;
					margin: auto;
					margin-bottom: 30rpx;
					box-sizing: border-box;
					.avatar {
						width: 50px;
						height: 50px;
						margin-right: 15px;
						border-radius: 10px;
					}
					.text {
						color: white;
						line-height: 50rpx;
						font-size: 16px;
						.description {
							font-size: 13px;
						}
					}
				}
			}
		}//-----------------------------------------------------------
		
		
		//-----------------------------其他“我未加入”的更多优质知识链盒子
		.MoreKnowledgesBox{
			width: 80%;
			height: 730rpx;
			margin: auto;
			margin-top: 36rpx;
			margin-bottom: 20px;
			padding: 16px;
			background-color: #2352615c;
			border-radius: 20px;
			// 大标题
			.title {
				color: white;
				font-size: 15px;
			}
			// 第一行【大话题分类】选项区域
			.TagBox {
				width: 100%;
				overflow: hidden;
				padding: 13px 10px 13px 0px;
				.tagView {
					white-space: nowrap;/* 使所有内容在一行显示 */
					overflow-y: auto;
					.Tag {
						display: inline-block;
						width: auto;
						height: 54rpx;
						margin-right: 20px;
						padding: 7px;
						line-height: 26rpx;
						background-color: #a9d1f0;
						text-align: center;
						box-sizing: border-box;
						border-radius: 10px;
						font-size: 14px;
					}
					.Tag_active {
						background-color: #5f86c1;
					}
				}
			}
			
			// 【小话题】区域
			.MoreSmallKnowledgesBox {
				width: 100%;
				height: 530rpx;
				overflow-y: auto;
				
				.smallKnowledge {
					display: flex;
					overflow-y: auto;
					width: 98%;
					margin: auto;
					margin-bottom: 30rpx;
					box-sizing: border-box;
					
					.avatar {
						width: 50px;
						height: 50px;
						margin-right: 15px;
						border-radius: 10px;
					}
					
					.text{
						color: white;
						line-height: 50rpx;
						font-size: 16px;
						.description{
							font-size: 13px;
						}
					}
				}
			}
		}//-----------------------------------------------------------
	}
</style>

